<template>
  <div>
    <div id="myChart0"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // pie饼状图
      // 接受的数据
      dataList: [],
      // 定义
      drawing: {
        title: {
          text: "",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        legend: {
          // data: ["2011年", "2012年"],
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "value",
          boundaryGap: [0, 0.01],
        },
        yAxis: {
          type: "category",
          data: [],
        },
        series: [
          {
            type: "bar",
            data: [],
          },
        ],
      },
    };
  },
  methods: {
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("myChart0"));
      // 绘制图表
      myChart.setOption(this.drawing);
     
    },
    // 更改数据
    updateData(value) {
      this.dataList = value;
      // 需要重新清空数据
      this.drawing.yAxis.data = [];
      this.drawing.series[0].data = [];
      this.dataList.forEach((element) => {
        this.drawing.yAxis.data.push(element.name);
        this.drawing.series[0].data.push(element.value);
      });
      this.drawLine();
    },
  },
  // 创建
  created() {},
  // 挂载
  mounted() {},
  // 更改
  updated() {},
};
</script>
<style scoped>
#myChart0 {
  height: 450px;
  width: 700px;
}
</style>